<template>
	<div class="dashboard">
		<!--<div class="ad">-->
			<!--<p>xxx（尾号1235）1分钟前成功借款10万元</p>-->
		<!--</div>-->
		<div class="PageBox">
			<ul class="LoanSort">
				<li v-for="(item,index) in products.data.slice(0,4)" @click="goLoan(item.file_type,item.id,item.periods)">
          <span v-show="index===0 || index===3"></span>
          <div class="imgs">
            <img :class="'img'+index" :src="carImgs[item.file_type-1]" alt=""/>
          </div>
          <h4>{{item.name}}</h4>
          <h5>{{(item.total_money/10000).toFixed(2)}}万</h5>
          <p>最高贷款额度</p>
				</li>
			</ul>
		</div>
		<div class="banner">
      <swiper :options="swiperOption">
        <swiper-slide>
          <img src="./../../assets/img/mipmap-hdpi/banner.png" alt="">
        </swiper-slide>
      </swiper>
    </div>
	</div>
</template>
<script>
  import CONFIG from './../../config'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default{
    data(){
      return{
        carImgs:[
          require('../../assets/img/home/product-1.png'),
          require('../../assets/img/home/product-2.png'),
          require('../../assets/img/home/product-3.png'),
          require('../../assets/img/home/product-4.png'),
        ],
        products:{
          data:[],
          current_page:1,
          total:1,
          per_page:10,
          last_page:1
        },
        swiperOption: {
          // loop:true
        },
      }
    },
    created(){
      this.$indicator.open()
    },
    mounted(){
      this.$store.dispatch('getProductsAction').then((res)=>{
        this.$indicator.close();
        this.products = res.data;
      }).catch((err)=>{
        this.$indicator.close();
        this.$msg(err,this.$toast);
      });
    },
		components:{
      swiper,
      swiperSlide
		},
    methods:{
      goLoan(file_type,productId,periods){
        if(!CONFIG.token){
          this.$router.push('/login');
          return;
        }
        //先判断用户类型,只有企业的才可以进入大货车和营运车
        if(CONFIG.userType==1 && (file_type =='2' || file_type == '3')){
          this.$toast('个人用户无法使用')
        }else if(CONFIG.isVerified ==0){
          this.$messagebox.confirm('请先完成实名认证，才能贷款。').then(action => {
            this.$router.push('/perfectPersonal');
            localStorage.setItem('fromPage','dashboard')
          });
        }else if(CONFIG.isVerified ==1){
          //已经完成实名认证，跳转到资料填写页面，并带上参数
          if(file_type=='4'){
            this.$router.push({path:'premiumstaging',query:{fileType:file_type,productId:productId,periods:periods}})
          }else {
            this.$router.push({path:'loanStaging',query:{fileType:file_type,productId:productId,periods:periods}})
          }
        }
      },
    }
	}
</script>
<style lang="scss" scoped>
	.dashboard{
    background: #F7F8FA;
		.ad{
			font-size:24px;
      line-height: 24px;
			font-weight:400;
			color:rgba(243,152,0,1); 
			text-align: center;
      padding: 29px  0;
		}
		.PageBox{
			padding: 0 40px;
      margin: 30px 0 0 0;
			.LoanSort{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				text-align: center;
				font-weight:400;
				li{
          margin: 0 0 30px 0;
					width:320px;
					height:420px;
					background:rgba(255,255,255,1);
					border-radius:10px;
          position: relative;
          span{
            width: 25px;
            height: 30px;
            background: url("./../../assets/img/home/remen.png");
            background-size: 100% 100%;
            position: absolute;
            right: 30px;
            top: 30px;
          }
          .imgs{
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 77px 0 0 0;
            img{
              width: 66px;
              &.img1{
                width: 76px;
              }
              &.img3{
                width: 76px;
              }
            }
          }
          h4{
            font-size:30px;
            line-height: 40px;
            height: 100px;
            font-weight:400;
            color:rgba(51,51,51,1);
            margin: 13px 0 11px 0;
          }
          h5{
            font-size:60px;
            font-weight:bold;
            color:rgba(231,31,24,1);
            line-height: 60px;
            margin: 0 0 16px 0;
          }
          >p{
            font-size:24px;
            line-height: 24px;
            font-weight:400;
            color:rgba(153,153,153,1);
          }
				}
			}
		}
		.banner{
      padding: 0 29px;
			img{
        width: 100%;
			}
		}
	}
  /deep/ .mint-msgbox-btns{
    .mint-msgbox-confirm{
    border-left:1px solid #ddd;
    }
  }
</style>
